﻿@{
    ViewBag.Title = "Icon Generator";
}

<style type="text/css">
    .icon-g-body {
        height: 400px;
    }

    .icon-g-body .btn-aria {
        vertical-align:middle; 
        text-align:center; 
        height:100%; 
        top:100px
    }

    .icon-g-body .btn-aria input{
        margin-top: 5px;
    }

    .ico_imageuploader {
        border:dotted;
        border-width: 3px;
        border-color: #ff6a00;
        padding: 20px;
        margin-top: 20px;
        max-width: 300px;
    }

    .ico_imageuploader_ondragover {
        border:dotted;
        border-width: 3px;
        border-color: #f00;
        padding: 20px;
        margin-top: 20px;
        max-width: 300px;
    }
</style>

<script src="~/Scripts/customJS/guestbookLib.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#imgIcoImageUploader").on("dragover", function (ev) {
            ev.preventDefault();
            if (!$("#imgIcoImageUploader").hasClass("ico_imageuploader_ondragover"))
                $("#imgIcoImageUploader").removeClass("ico_imageuploader").addClass("ico_imageuploader_ondragover");
        }).on("drop", function (ev) {
            ev.preventDefault();


            var filelist = ev.originalEvent.dataTransfer.files;

            if (filelist.length != 1)
                return bootbox.alert("이미지는 1개만 등록가능합니다.", null);

            if (filelist[0].type.indexOf("image") == -1)
                return bootbox.alert("이미지 파일만 업로드 가능합니다.", function () { });

            if (filelist[0].size > 100000) {
                return bootbox.alert("100KB 이상의 이미지는 서버용량 관계로 올리실 수 없습니다. 양해바랍니다.", function () { });
            }

            var img = $("#imgIcoImageUploader").attr("data-filename", filelist[0].name);
            img.file = filelist[0];

            var reader = new FileReader();
            reader.onload = function () {
                img.attr("src", reader.result);
            };
            reader.readAsDataURL(filelist[0]);


            $("#btnGenerate").prop("disabled", false);
            $("#btnReload").prop("disabled", false);
            $("#btnDownload").hide();

            return false;
        });

        $("#btnGenerate").prop("disabled", true);
        $("#btnReload").prop("disabled", true);


        // 생성하기
        $("#btnGenerate").on("click", function () {
            var inputdata = {
                fileName: $("#imgIcoImageUploader").attr("data-filename"),
                fileData: $("#imgIcoImageUploader").attr("src")
            }

            $.ajax({
                url: "/icongenerator/generate",
                type: 'POST',
                async: true,
                data: JSON.stringify({ inputData: inputdata }),
                contentType: 'application/json',
                success: function (result) {
                    if (result.ResponseImage) {
                        //$("#imgResult").attr("src", result.ResponseImage);
                        $("#imgResult").attr("src", result.ResponseFileUrl);
                        $("#spnIcoFileName").html(result.ResponseFileName);
                        $("#spnIcoFileSize").html(result.ResponseFileSize);
                        $("#spnIcoFileWidth").html(result.ResponseFileWidth);

                        $("#btnDownload").attr("href", result.ResponseFileUrl);
                        $("#btnDownload").attr("download", result.ResponseFileName);
                        $("#btnDownload").attr("title", result.ResponseFileName);
                        $("#btnDownload").show();

                        $("#btnGenerate").prop("disabled", true);
                        $("#btnReload").prop("disabled", true);
                    }
                },
                beforeSend: function () {

                }
                //xhr: function () {
                //    var myXhr = $.ajaxSettings.xhr();
                //    if (myXhr.upload) {
                //        myXhr.upload.addEventListener("progress", function () { }, false);
                //    } else {
                //        console.log("Upload progress is not supported.");
                //    }
                //    return myXhr;
                //}
            });
        });


        // 새로고침
        $("#btnReload").on("click", function() {
            location.reload();
        });
    });

    guestbookLib({ locationCode: 'ICONCVT', subKey: '0', addButtonName: 'btnGuestbookAdd', isAjaxCall: true, isUseSecret: false });

</script>


<div class="bs-callout bs-callout-article">
    <h3><img src="~/Images/Farm-Fresh_tree.png" />아이콘 생성기(icon generator)</h3>
    <p>각종 이미지를 ico 확장자 변경하는 기능을 제공합니다.</p>
</div>


<div class="row icon-g-body">
    <div class="col-sm-offset-1 col-sm-4">
        <div class="row" >
            <span class="glyphicon glyphicon-log-out"> 이미지를 아래 사각형에 끌어서 등록해주세요.</span>
        </div>
        <div class="row" >
            <img id="imgIcoImageUploader" src="~/Images/drop-your-drawers-here.jpg" class="row ico_imageuploader" />
        </div>
    </div>
    <div class="col-sm-1 btn-aria">
        <input type="button" id="btnGenerate" class="btn btn-warning" value="생성하기" />
        <input type="button" id="btnReload" class="btn btn-default" value="새로고침" />
    </div>
    <div class="col-sm-5">
        <div class="row" >
            <span class="glyphicon glyphicon-log-out"> 생성된 ico</span>
        </div>
        
        <div class="row">
            <div class="col-sm-12 pull-left" style="background-color:#ff6a00; padding:10px; margin-top:20px">
                <div>
                    <img id="imgResult" src="~/Images/Item_icon_crystal.png" width="100" height="100" alt="파일이름" style="float:left; margin-right:10px" />
                </div>
                <div>
                    파일명 : <span id="spnIcoFileName"></span><br />
                    파일사이즈 : <span id="spnIcoFileSize"></span>Byte<br />
                    파일크기 : <span id="spnIcoFileWidth"></span><br />
                    <a href="#" id="btnDownload" download="" title="" style="display:none" >다운로드</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- (s) 댓글리스트 영역 (s) -->
<br />
<div class="well">
    <div class="row">
        <div class="col-md-6">
            <span class="glyphicon glyphicon-pencil" style="font-weight:bold; font-size:15px " >&nbsp;댓글로 욕하셔도 돼요~ </span>
        </div>
        <div class="col-md-6 text-right">
            <a id="btnGuestbookAdd" class="btn btn-info">글 남기기</a>
        </div>
    </div>
            
    <hr />
    <div id="divGuestBookList">
        <input type="hidden" id="hidLastGuestBookIdx" name="hidLastGuestBookIdx" value="" />
    </div>
    <!-- (e) 댓글리스트 영역 (e) -->
</div>